<template>
  <div class="container">
    <div class="title">食用农产品检测项目分析</div>
    <div class="body">
      <div class="echarts pie" ref="echartsPieRef"></div>
      <div class="type1">
        <div class="subtitle">检测项目合格率分析</div>
        <div
          class="type"
          @mouseenter="handleHover(true)"
          @mouseleave="handleHover(false)"
        >
          <pass-rate
            v-for="item in datas2"
            :key="item.name"
            :data-num="parseFloat(item.value)"
            :item-name="item.name"
            :item-value="item.value"
            :text-num="item.textNum"
            style="width: 50%; height: 49%"
            @click="jump"
          ></pass-rate>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getJcxmlbfxByHs, getJcxmHglfxByHs } from "@/api";
import * as echarts from "echarts";
import passRate from "./passRate.vue";
import { endianness } from "os";
import { sendMessage } from "../../hooks/message";

const color = [
  "#F5CE46",
  "#A0DCF7",
  "#EC6D6A",
  "#74FAFB",
  "#CFA0F7",
  "#5CC9FA",
  "#4293F6",
];
const echartsPieRef = ref<HTMLElement>();
const datas2 = ref<{ name: string; value: string; textNum: string }[]>([]);
const store = ref<{ name: string; value: string; textNum: string }[]>([]);
const initData = async () => {
  const { data: data1 } = await getJcxmlbfxByHs();
  const { data: data2 } = await getJcxmHglfxByHs();
  return { data1, data2 };
};
const createOption1 = (datas: any) => {
  const i = Math.ceil(datas.length / 2);
  let option = {
    title: {
      text: "检测项目类别分析",
      top: 10,
      x: 10,
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontFamily: "PingFang SC-Regular, PingFang SC",
        fontWeight: 400,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params: any) {
        // 提示框浮层内容格式器
        return `<div>${params.value}%</div><div>${params.name}</div>`;
      },
      renderMode: "html",
      className: "qwer",
      // position: ["50%", "25%"],
      // position: "center",
      backgroundColor: "transparent",
      borderColor: "transparent",
      boxShadow: "none",
      textStyle: {
        color: "#fff", // 提示框文本颜色
        fontSize: 16, // 提示框文本字体大小
      },
      borderWidth: 0,
      padding: 0,
    },
    legend: [
      {
        type: "scroll",
        orient: "vertical",
        height: "25%",
        oriend: "horizontal",
        bottom: "0%",
        left: "25%",
        right: "5%",
        pageIconSize: 8,
        itemHeight: 8,
        itemWidth: 8,
        x: "right",
        itemGap: 3,
        icon: "circle",
        textStyle: {
          color: "#fff",
          width: "100%",
          overflow: "breakAll",
        },
        data: datas,
        formatter: (name: any) => {
          if (datas.length) {
            const item = datas.filter((item: any) => item.name === name)[0];
            return item.name + "  " + item.value + "%   ";
          }
        },
      },
    ],
    series: [
      {
        name: "交易商品类别",
        type: "pie",
        radius: ["60%", "40%"],
        center: ["50%", "40%"],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 15,
          borderColor: "#fff",
          borderWidth: 0,
        },
        label: {
          show: false,
          position: "center",
          fontSize: 14, // 标签字体大小
          color: "#fff",
          formatter: function (params: any) {
            return params.name + params.value + "%";
          }, // 标签格式化
        },
        labelLine: {
          show: false,
        },
        data: datas,
      },
    ],
  };
  return option;
};
const jump = (name: string) => {
  sendMessage("jump", "/system/ysjcsjyxcz", {
    jcxm: name,
  });
};
const animation = ref(true);
const handleHover = (enter: boolean) => {
  animation.value = !enter;
};
onMounted(async () => {
  const { data1, data2 } = await initData();
  const pie = echarts.init(echartsPieRef.value!);
  const datas = data1.map((item: any, index: number) => {
    return {
      name: item.jcxmlbname,
      value: item.jcxmzblv?.replace("%", "") || "0",
      itemStyle: {
        normal: {
          borderWidth: 1,
          shadowBlur: 20,
          color: color[index % color.length],
          borderColor: color[index % color.length],
          // shadowColor: color[index % color.length],
        },
      },
    };
  });
  const option1 = createOption1(datas);
  pie.clear();
  pie.setOption(option1);
  let currentIndex = -1;
  setInterval(() => {
    let dataLen = datas.length;
    // 取消高亮显示
    pie.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    pie.dispatchAction({
      type: "hideTip",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    currentIndex++;
    if (currentIndex == dataLen) {
      currentIndex = -1;
    }
    // 高亮显示当前项
    pie.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    pie.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    // 判断是否需要换行
  }, 2000);

  store.value = data2.map((item: any) => {
    return {
      name: item.jcxmname,
      value: item.jcxmzblv.replace("%", ""),
      textNum: item.jcxmsl,
    };
  });
  let index = -1;
  setInterval(() => {
    if (animation.value === false) {
      return;
    }
    index++;
    datas2.value = [];
    let startIndex = index * 4;
    let endIndex = startIndex + 4;
    datas2.value = store.value.slice(startIndex, endIndex);
    if (endIndex > store.value.length) {
      index = -1;
    }
    // 判断是否需要换行
  }, 2000);
});
</script>
<style lang="scss" scoped>
.container {
  // min-width: 540px;
  min-height: 0px;
  // width: 28.13%;
  height: 100%;
  width: 100%;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
    display: flex;
  }
  .type1 {
    width: 50%;
    height: 100%;
    .type {
      height: calc(100% - 32px);
      display: flex;
      flex-wrap: wrap;
    }
  }
  .pie {
    width: 50%;
    height: 100%;
    min-height: 0px;
    flex: 1 1;
  }
  .subtitle {
    width: 100%;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-top: 12px;
  }
}
</style>
<style>
.qwer {
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  transform: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
</style>
